<template>
    <el-popover placement="top-start" :width="270" trigger="click" popper-class="emoji-popover" v-model:visible="visible">
        <template #reference>
            <div class="icon-emoji">
                <img :src="icon" />
                <span class="text">表情</span>
            </div>
        </template>

        <div class="emoji-list">
            <div class="emoji-item" @click="onSelectEmoji(item)" v-for="item in emojiList" :key="item">
                <img :title="item" :src="`${_oss_}images/emoji/${item}.gif`" />
            </div>
        </div>
    </el-popover>
</template>
<script setup>
import emojiList from "@/config/emoji.js";


const props = defineProps({
    icon: {
        type: String,
        default: _oss_ + "images/icon-emoji.svg"
    }
})

const visible = ref(false);
const emit = defineEmits(["selectEmoji"]);

const onSelectEmoji = (item) => {
    emit("selectEmoji", item);
};
</script>
<style lang="scss" scoped>
.icon-emoji {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: #666;

    img {
        width: 18px;
        height: 18px;
        margin-right: 4px;
    }
}

.emoji-list {
    display: flex;
    flex-wrap: wrap;
    height: 300px;
    overflow: auto;

    .emoji-item {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        cursor: pointer;

        img {
            width: 100%;
            height: 100%;
        }
    }
}
</style>
